<template>
  <self-svg v-if="!isImg" :name="iconUrl" :color="color" >
    {{ iconText }}
  </self-svg>
  <el-image v-else style="width: 40px; height: 40px" :src="iconUrl" fit="contain" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import SelfSvg from '@/components/svg/Svg.vue'
import {ElImage} from 'element-plus'
const props = defineProps({
  params: {
    type: Object as () => any,
    required: true
  }
})
const iconUrl = ref('')
const color = ref('') // icon 颜色
const isImg = ref(false) // true 是图片 false 是icon
const iconText = ref('')
if (typeof props.params.value === 'object') {
  // {icon:"图片或icon名称","text":"文字"}
  // 传过来的是对象
  const { text, icon } = props.params.value
  if (text) {
    iconText.value = text
  }
  if (icon) {
    iconUrl.value = icon
    if (icon.indexOf('http') === 0) {
      isImg.value = true
    }
  }
} else {
  if (props.params.value.indexOf('http') === 0) {
    isImg.value = true // 纯图片
    iconUrl.value = props.params.value
  } else {
    switch (props.params.value) {
      case 'open':
        // 开放
        iconUrl.value = 'dot'
        color.value = '#2EE961'
        iconText.value = "开放"
        break;

      case 'close':
        iconUrl.value = 'dot'
        color.value = 'red'
        iconText.value = "关闭"
        // 关闭
        break;
    }
  }
}

</script>